﻿@page "/components/pivot"

<PageOutlet Url="components/pivot"
            Title="Pivot"
            Description="pivot component of the bit BlazorUI components" />

<DemoPage Name="Pivot"
          SecondaryNames="@(["Tab", "TabPage"])"
          Description="The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more contentviews and relies on text headers to articulate the different sections of content. Tapping on a pivot item header navigates to that header's section content. Tabs are a visual variant of Pivot that use a combination of icons and textor just icons to articulate section content."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Navs/Pivot/BitPivot.razor"
          GitHubDemoUrl="Navs/Pivot/BitPivotDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitPivot>
            <BitPivotItem HeaderText="File">
                <h3>Pivot #1</h3>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Shared with me">
                <h3>Pivot #2</h3>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Recent">
                <h3>Pivot #3</h3>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Icon and Count" RazorCode="@example2RazorCode" Id="example2">
        <BitPivot>
            <BitPivotItem HeaderText="Files" IconName="@BitIconName.Info">
                <h1>Pivot #1: Files</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Shared with me" ItemCount="32">
                <h1>Pivot #2: Shared with me</h1>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Recent" IconName="@BitIconName.Info" ItemCount="12">
                <h1>Pivot #3: Recent</h1>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example3RazorCode" Id="example3">
        <BitPivot Size="@BitSize.Large">
            <BitPivotItem HeaderText="Large File">
                <h1>Pivot #1: Large File</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Large Shared with me">
                <h1>Pivot #2: Large Shared with me</h1>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Large Recent">
                <h1>Pivot #3: Large Recent</h1>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="HeaderType" RazorCode="@example4RazorCode" Id="example4">
        <BitPivot HeaderType="@BitPivotHeaderType.Tab">
            <BitPivotItem HeaderText="File tab">
                <h1>Pivot #1: File tab</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Shared with me tab">
                <h1>Pivot #2: Shared with me tab</h1>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Recent tab">
                <h1>Pivot #3: Recent tab</h1>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <BitPivot @bind-SelectedKey="selectedKey">
            <BitPivotItem Key="1" HeaderText="Samples">
                <h1>Pivot #1: Samples</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem Key="2" HeaderText="Files">
                <h1>Pivot #2: Files</h1>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem Key="3" HeaderText="Recent">
                <h1>Pivot #3: Recent</h1>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
            <BitPivotItem Key="4" HeaderText="Last">
                <h1>Pivot #4: Last</h1>
                <div>
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
            </BitPivotItem>
        </BitPivot>
        <br /><br />
        <BitButton Variant="BitVariant.Outline"
                   IconName="@BitIconName.CaretSolidLeft"
                   IsEnabled="@(selectedKey != "1")"
                   OnClick="(() => selectedKey = (int.Parse(selectedKey) - 1).ToString())">
            Prev
        </BitButton>
        <BitButton Variant="BitVariant.Outline"
                   IconName="@BitIconName.CaretSolidRight"
                   IsEnabled="@(selectedKey != "4")"
                   OnClick="(() => selectedKey = (int.Parse(selectedKey) + 1).ToString())">
            Next
        </BitButton>
    </DemoExample>

    <DemoExample Title="Detached" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div style="border:1px solid gray;padding:10px;">
            @if (detachedSelectedKey == "Foo")
            {
                <div>Hello I am Fooooooooooooo</div>
            }
            else if (detachedSelectedKey == "Bar")
            {
                <div>Hello I am Barrrrrrrrrrrr</div>
            }
            else if (detachedSelectedKey == "Bas")
            {
                <div>Hello I am Bassssssssssss</div>
            }
            else if (detachedSelectedKey == "Biz")
            {
                <div>Hello I am Bizzzzzzzzzzzz</div>
            }
        </div>
        <br />
        <hr />
        <br />
        <BitPivot HeaderOnly="true"
                  DefaultSelectedKey="Foo"
                  OnItemClick="@(item => detachedSelectedKey = item?.Key)">
            <BitPivotItem HeaderText="Foo" Key="Foo"></BitPivotItem>
            <BitPivotItem HeaderText="Bar" Key="Bar"></BitPivotItem>
            <BitPivotItem HeaderText="Bas" Key="Bas"></BitPivotItem>
            <BitPivotItem HeaderText="Biz" Key="Biz"></BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <BitPivot OnItemClick="@(item => selectedPivotItem = item)">
            <BitPivotItem HeaderText="Foo">
                <h1>Pivot #1: Foo</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Bar">
                <h1>Pivot #2: Bar</h1>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Bas">
                <h1>Pivot #3: Bas</h1>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Biz">
                <h1>Pivot #4: Biz</h1>
                <div>
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
            </BitPivotItem>
        </BitPivot>
        <br /><br />
        <div>Last header clicked: <b>@selectedPivotItem?.HeaderText</b></div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example8RazorCode" Id="example8">
        <BitPivot>
            <BitPivotItem>
                <Header>
                    <span style="color:red">Header #1</span>
                </Header>
                <Body>
                    <h1>Pivot #1</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </Body>
            </BitPivotItem>
            <BitPivotItem ItemCount="99">
                <Header>
                    <i style="color:green" class="bit-icon bit-icon--HeartFill"></i>
                    <span style="color:blue">Header #2</span>
                    <i style="color:green" class="bit-icon bit-icon--HeartFill"></i>
                </Header>
                <Body>
                    <h1>Pivot #2</h1>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </Body>
            </BitPivotItem>
            <BitPivotItem IconName="@BitIconName.Inbox">
                <Header>
                    <span style="color:rebeccapurple">Header <i style="color:purple" class="bit-icon bit-icon--HeartFill"></i> #3</span>
                </Header>
                <Body>
                    <h1>Pivot #3</h1>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </Body>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Alignment" RazorCode="@example9RazorCode" Id="example9">
        <BitPivot Alignment="BitAlignment.Center">
            <BitPivotItem HeaderText="File">
                <h1>Pivot #1</h1>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Shared with me">
                <h2>Pivot #2</h2>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitPivotItem>
            <BitPivotItem HeaderText="Recent">
                <h3>Pivot #3</h3>
                <div>
                    In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
            </BitPivotItem>
        </BitPivot>
    </DemoExample>

    <DemoExample Title="Position" RazorCode="@example10RazorCode" Id="example10">
        <div>Pivot Position: <b>Top</b></div><br />
        <div class="box">
            <BitPivot Position="BitPivotPosition.Top">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1: File</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared">
                    <h1>Pivot #2: Shared</h1>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h1>Pivot #3: Recent</h1>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
        <br /><br /><br />
        <div>Pivot Position: <b>Bottom</b></div><br />
        <div class="box">
            <BitPivot Position="BitPivotPosition.Bottom">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1: File</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared">
                    <h1>Pivot #2: Shared</h1>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h1>Pivot #3: Recent</h1>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
        <br /><br /><br />
        <div>Pivot Position: <b>Start</b></div><br />
        <div class="box">
            <BitPivot Position="BitPivotPosition.Start">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1: File</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me" Style="width:130px">
                    <h1>Pivot #2: Shared with me</h1>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h1>Pivot #3: Recent</h1>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
        <br /><br /><br />
        <div>Pivot Position: <b>End</b></div><br />
        <div class="box">
            <BitPivot Position="BitPivotPosition.End">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1: File</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me" Style="width:130px">
                    <h1>Pivot #2: Shared with me</h1>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h1>Pivot #3: Recent</h1>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example11RazorCode" Id="example11">
        <div>
            <div>Component's Style & Class:</div><br />
            <BitPivot Style="border: 1px solid tomato;">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me">
                    <h2>Pivot #2</h2>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h3>Pivot #3</h3>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
            <br /><br />
            <BitPivot Class="custom-class">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me">
                    <h2>Pivot #2</h2>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h3>Pivot #3</h3>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
            <br /><br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitPivot Styles="@(new() { HeaderIcon = "color: tomato;", HeaderText = "color: purple;" })">
                <BitPivotItem HeaderText="File" IconName="Info">
                    <h1>Pivot #1</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me">
                    <h2>Pivot #2</h2>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h3>Pivot #3</h3>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
            <br /><br /><br />
            <BitPivot Classes="@(new() { Body = "custom-body", SelectedItem = "custom-selected-item", Header = "custom-header" })">
                <BitPivotItem HeaderText="File">
                    <h1>Pivot #1</h1>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                        for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Shared with me">
                    <h2>Pivot #2</h2>
                    <div>
                        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                        in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    </div>
                </BitPivotItem>
                <BitPivotItem HeaderText="Recent">
                    <h3>Pivot #3</h3>
                    <div>
                        In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                        shaped into meaning, and the emotions ready to resonate with every reader.
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example12RazorCode" Id="example12">
        <div class="box">
            <BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
                <BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                </BitPivotItem>
                <BitPivotItem HeaderText="آخرین ها" ItemCount="8">
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                </BitPivotItem>
                <BitPivotItem HeaderText="شخصی" IconName="@BitIconName.Info" ItemCount="6">
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد
                </BitPivotItem>
            </BitPivot>
        </div>
        <br /><br /><br />
        <div class="box">
            <BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.Start">
                <BitPivotItem HeaderText="اسناد">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                </BitPivotItem>
                <BitPivotItem HeaderText="آخرین ها">
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                </BitPivotItem>
                <BitPivotItem HeaderText="شخصی">
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </BitPivotItem>
            </BitPivot>
        </div>
        <br /><br /><br />
        <div class="box">
            <BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.End">
                <BitPivotItem HeaderText="اسناد">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                </BitPivotItem>
                <BitPivotItem HeaderText="آخرین ها">
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                </BitPivotItem>
                <BitPivotItem HeaderText="شخصی">
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </BitPivotItem>
            </BitPivot>
        </div>
    </DemoExample>
</DemoPage>
